import React, {createRef} from "react"
import ContentView from "../../components/ContentView"
import ScrollContents from "../../components/ScrollContent"
import {login, verifyCodeGetting,userSourceSetting} from '../../http/api'
import storage from '../../utils/storage'
import {Toast} from 'antd-mobile'
import './index.scss'
export default class Login extends React.Component{
        constructor (props) {
                super (props);
                this.state = {
                        lineActive:{
                                account:false,
                                password:false,
                                code:false
                        },
                        authActive:false,
                        authText:'获取验证码'
                }
                this.authLock = false
                this.authTimer = null

                //account ref
                this.accountDom = createRef()
                this.authDom = createRef()
                this.codeDom = createRef()
        }

        handleActiveLine=(type,bool)=>{
                let {lineActive} = this.state
                lineActive[type] = bool
                this.setState({lineActive})
        }
        //获取验证码点击按钮操作
        handleAuthActive=()=>{
                if (this.authLock) return
                if (!/^1[3456789]\d{9}$/.test (this.accountDom.current.value)) {
                        Toast.fail('手机号格式错误')
                        return
                }
                //获取验证码
                verifyCodeGetting(this.accountDom.current.value).then(res=>{
                        this.authLock = true
                        let authTimeSec = 60
                        this.authTimer = setInterval(()=>{
                                authTimeSec--
                                this.setState({
                                        authText:authTimeSec===0
                                                ?'重新获取验证码':`${authTimeSec>10?authTimeSec:
                                                        '0'+authTimeSec}秒后重试`
                                })
                                if(!authTimeSec){
                                        clearInterval(this.authTimer)
                                        this.authLock = false
                                }
                        },1000)
                })
        }
        handleOnSubmit = ()=>{
                const [...ref]=[this.accountDom,this.authDom,this.codeDom]
                const [phone,verifyCode,referCode,] = ref.map(item=>item.current.value)
                if (!/^1[3456789]\d{9}$/.test (phone)) {
                        Toast.fail('手机号格式错误')
                        return
                }
                if (!verifyCode) {
                        Toast.fail('验证码不能为空')
                        return
                }

                //登录
                login({phone,verifyCode,referCode}).then(res=>{
                        //保存个人信息至缓存以及跳转
                        userSourceSetting().then(res=>{
                                for(let k in res){
                                        storage.set(k,res[k])
                                }
                                this.props.history.push('/index/home')
                        })
                })
        }
        componentWillUnmount () {
                if (!!this.authTimer) {
                        clearInterval(this.authTimer)
                }
        }

        render () {
                const {lineActive,authActive,authText} = this.state
                return <ContentView title='登录/注册' className='login-container'>
                        <ScrollContents>
                                <div className="content">
                                        <div className="logo"/>
                                        <div className="form-input-wrapper">
                                                <input
                                                        type="tel"
                                                        placeholder='请输入手机号'
                                                        className='account'
                                                        ref={this.accountDom}
                                                        onBlur={this.handleActiveLine.bind(this,'account',false)}
                                                        onFocus={this.handleActiveLine.bind(this,'account',true)}/>
                                                <div className={`line ${lineActive.account&&'active'}`}/>
                                        </div>
                                        <div className="form-input-wrapper">
                                                <input
                                                        type="tel"
                                                        placeholder='短信验证码'
                                                        className='password'
                                                        maxLength={6}
                                                        ref={this.authDom}
                                                        onBlur={this.handleActiveLine.bind(this,'password',false)}
                                                        onFocus={this.handleActiveLine.bind(this,'password',true)}/>
                                                <div className={`line ${lineActive.password&&'active'}`}/>
                                                <span
                                                        onClick={this.handleAuthActive}
                                                        className={`auth-code ${authActive&&'disabled'}`}>{authText}</span>
                                        </div>
                                        <div className="form-input-wrapper">
                                                <input
                                                        type="text"
                                                        placeholder='推荐码(选填)'
                                                        className='code'
                                                        ref={this.codeDom}
                                                        onBlur={this.handleActiveLine.bind(this,'code',false)}
                                                        onFocus={this.handleActiveLine.bind(this,'code',true)}/>
                                                <div className={`line ${lineActive.code&&'active'}`}/>
                                        </div>
                                        <div className="submit-btn" onClick={this.handleOnSubmit}>注册/登录</div>
                                </div>
                        </ScrollContents>
                </ContentView>
        }

}
